import React from "react";
import { NavBar, Icon, List, InputItem, Button } from "antd-mobile";

class Reg extends React.Component {
    state = {
        hasError: false,
        value: "",
    };
    onChange = (value) => {
        if (value.replace(/\s/g, "").length < 11) {
            this.setState({
                hasError: true,
            });
        } else {
            this.setState({
                hasError: false,
            });
        }
        this.setState({
            value,
        });
    };
    render() {
        let { history } = this.props;
        return (
            <div className="login">
                <NavBar
                    mode="dark"
                    icon={<Icon type="left" size="lg" />}
                    onLeftClick={() => history.goBack()}
                >
                    免费注册
                </NavBar>
                <List renderHeader={() => "请注册"}>
                    <InputItem
                        type="phone"
                        placeholder="请输入手机号码"
                        error={this.state.hasError}
                        onErrorClick={this.onErrorClick}
                        onChange={this.onChange}
                    >
                        <span className="star">*</span>
                        手机号码
                    </InputItem>
                    <InputItem
                        type="text"
                        placeholder="请输入用户名"
                        error={this.state.hasError}
                        onErrorClick={this.onErrorClick}
                    >
                        <span className="star">*</span>
                        用户名
                    </InputItem>
                    <InputItem
                        type="password"
                        placeholder="请输入密码"
                        error={this.state.hasError}
                        onErrorClick={this.onErrorClick}
                    >
                        <span className="star">*</span>
                        密码
                    </InputItem>
                    <InputItem
                        type="password"
                        placeholder="请输入确认密码"
                        error={this.state.hasError}
                        onErrorClick={this.onErrorClick}
                    >
                        <span className="star">*</span>
                        确认密码
                    </InputItem>
                    <InputItem
                        type="email"
                        placeholder="请输入邮箱"
                        error={this.state.hasError}
                        onErrorClick={this.onErrorClick}
                    >
                        <span className="star">*</span>
                        邮箱
                    </InputItem>
                    <div
                        style={{
                            display: "flex",
                            justifyContent: "space-evenly",
                            padding: "10px 0",
                        }}
                    >
                        <Button
                            type="primary"
                            size="small"
                            style={{ width: "100px" }}
                        >
                            立即注册
                        </Button>
                        <Button
                            type="warning"
                            size="small"
                            style={{ width: "100px" }}
                            onClick={() => history.push("/login")}
                        >
                            取消
                        </Button>
                    </div>
                </List>
            </div>
        );
    }
}

export default Reg;
